<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>龙采体育集团招聘信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="coach/css/jquery-weui.css">
	<link rel="stylesheet" href="coach/css/reset.css">
	<link rel="stylesheet" href="coach/css/flexible.css">
	<link rel="stylesheet" href="coach/css/vant.css">
	<link rel="stylesheet" href="coach/css/mobiscroll.custom-3.0.0-beta6.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.1/lib/index.css">
    <script src="coach/js/jquery.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="coach/js/flexible.js"></script>
	<script src="coach/js/vue/vue.js"></script>
    <script src="coach/js/vue/axios.js"></script>
    <script src="coach/js/vue/MD5.js"></script>
    <script src="coach/js/vue/qs.js"></script>
	<script src="coach/js/vue/vant.js"></script>
	<script src="coach/js/mobiscroll.custom-3.0.0-beta6.min.js"></script>
	<script src="coach/js/main.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 100%;;
            height: 812px;
            background: #FFFFFF;
        }
        .top{
            width: 100%;;
            height: 66px;
            background: #F2F2F2;
            display: flex;
            align-items: center;
        }
        .top img{
            width: 8px;
            height: 14px;
            margin-left: 16px;
        }
        .top p{
            margin-left: 80px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2A2A2A;
            line-height: 25px;
        }
        .center{
            width: 318px;
            margin: 0 auto;
        }
        .form{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .avatar1{
            height: 100px;
            
        }
        .name{
            height: 50px;
            border-bottom: 1px solid #f0f0f0;
            opacity: 0.7;
        }
        .date{
            height: 50px;
            border-bottom: 1px solid #f0f0f0;
            opacity: 0.7;
        }
        .salary{
            height: 50px;
            border-bottom: 1px solid #f0f0f0;
            opacity: 0.7;
        }
        .work{
            margin: 14px 0;
            border-bottom: 1px solid #f0f0f0;
            opacity: 0.7;
        }
        .certificate{
            margin-top: 17px;
        }
        .certificate_photo{
            margin-left: 4px;
            margin-top: 18px;

        }
        .el-icon-plus{
            font-size: 36px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #C6C6C6;
            line-height: 50px;
        }
        .bottom{
            width: 100%;
            height: 123px;
            background: #f5f5f5;
            margin-top: 39px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bottom button{
            width: 292px;
            height: 40px;
            background: #0E9CFA;
            box-shadow: 0px 8px 11px 0px rgba(14, 156, 250, 0.36), 0px 2px 6px 0px rgba(34, 47, 85, 0.05);
            border-radius: 2px;
            border: none;
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 21px;
        }
        .center span{ 
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
        }
        input{
            border: none;
            width: 100px;
            height: 20px;
            margin-right: 21px;
            font-size: 14px;
            text-align:right;
            
        }
        textarea{
            width: 100%;
            border: none;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            margin-top: 11px;
        }
        textarea:focus{
            outline: none;
        }
        input:focus{
            outline: none;
        }

        .van-cell{
            padding: 10px 0;
        }
        .van-cell__title{
            flex: none;
        }

        #avatarImage{
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <div class="top">
            <!-- <img src="./images/Rectangle .png" alt=""> -->
            <p>龙采体育集团招聘信息</p>
        </div>
        <el-form ref="form"  label-width="80px">    
            <div class="center">
                <div class="avatar1 form">
                    <span>头像</span>
                    <div style="display: flex;align-items: center;">
                        <!-- vantUI 上传文件 -->
                        <van-uploader preview-size="50px" :after-read="onRead">
                            <img src="./images/1604642996.jpg" alt="" id="avatarImage">
                        </van-uploader>
                        <span style="color: #929292;">></span>
                    </div>
                </div>
                <div class="name form">
                    <span>姓名</span>
                    <input type="text" placeholder="请输入" v-model="from.name">
                </div>
                <div class="name form">
                    <span>手机号</span>
                    <input type="text" placeholder="请输入" v-model="from.phone">
                </div>
                <div class="date form">
                    <!-- 日历选择 -->
                    <span>出生年月日</span>
                    <input id="age" ref="Birth" type="text"  placeholder="请选择出生日期" class="customername">
                </div>
                <div class="salary form">
                    <span>期望薪资</span>
                    <input type="number" placeholder="请输入" v-model="from.salary">
                </div>
                <div class="work">
                    <span>工作经历</span>
                    <textarea  rows="3" placeholder="请输入" v-model="from.experience"></textarea>
                </div>
                <div class="photo">
                    <span>任职照片</span>
                    <div style="margin-left: 4px;margin-top: 18px;">
                        <van-uploader v-model="up_workImg" multiple>
                            <van-button style="width: 80px;height: 80px; border: 1px dashed #c6c6c6;"><i class="el-icon-plus"></i></van-button>
                        </van-uploader>
                    </div>
                </div>
                <div class="certificate">
                    <span>所获荣誉证书</span>
                    <div class="certificate_photo">
                        <div class="c_p">
                            <van-uploader v-model="c_p_avatar" multiple>
                                <van-button style="width: 80px;height: 80px; border: 1px dashed #c6c6c6;"><i class="el-icon-plus"></i></van-button>
                            </van-uploader>
                        </div>
                        <!-- <div class="c_p">
                            <van-uploader v-model="c_p_avatar2" multiple>
                                <van-button style="width: 74px;height: 74px; border: 1px dashed #c6c6c6;"><i class="el-icon-plus"></i></van-button>
                            </van-uploader>
                        </div>
                        <div class="c_p">
                            <van-uploader v-model="c_p_avatar3" multiple>
                                <van-button style="width: 74px;height: 74px; border: 1px dashed #c6c6c6;"><i class="el-icon-plus"></i></van-button>
                            </van-uploader>
                        </div> -->
                        <!-- <input type="upfile" class="file-upload-input" id="id-pic-file" type="file" accept="image/jpg,image/jpeg,image/png"> -->
                    </div>
                </div>
            </div>
    
            <div class="bottom">
                <el-button type="primary" @click="onSubmit"><span style="color: white;">提交</span></el-button>
            </div>
        </el-form>
    </div>
    
</body>
<!-- 引入vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            from:{
              pid: "",
              name: "",
              phone: "",
              birth: "",
              salary: "",
              experience: ""
            },
            up_workImg:[],
            c_p_avatar:[],
            imgFile:'',
        },
        created(){
            this.setCanS()
        },
        methods: {
            //设置参数
            setCanS(){
                let Request = new Object()
                Request = GetRequest()
                this.from.pid = Request['pid']
            },
            // 头像上传
            onRead(file){
                console.log(file);
                let avatarImage = document.getElementById('avatarImage')
                avatarImage.src = file.content
                this.imgFile = file.content
            },
            get_Time(date){
                this.from.birth = date;
            },
            // 提交
            onSubmit(){
                console.log(this.c_p_avatar)
                if(this.from.name == ''){
                    window.vant.Toast.fail('请填写姓名')
                    return
                }
                if(this.from.phone == ''){
                    window.vant.Toast.fail('请填写手机号')
                    return
                }
                if(this.from.birth == ''){
                    window.vant.Toast.fail('请选择出生日期')
                    return
                }
                if(this.from.salary == ''){
                    window.vant.Toast.fail('请填写期望薪资')
                    return
                }
                if(this.from.experience == ''){
                    window.vant.Toast.fail('请填写工作经历')
                    return
                }
                if(this.up_workImg.length < 0){
                        window.vant.Toast.fail('请上传任职照片')
                        return
                }
                if(this.c_p_avatar.length < 0){
                        window.vant.Toast.fail('请上传所获荣誉证书')  
                        return
                }
                var up_workImg = ''
                var c_p_avatar = ''
                this.up_workImg.forEach(function(c) {
                  up_workImg += c.content + ",,"
                });
                this.c_p_avatar.forEach(function(c) {
                  c_p_avatar += c.content + ",,"
                });
                let from=JSON.stringify(this.from)
                let sign=md5(from)
                const params={
                    from:from,
                    sign:sign,
                    pic:this.imgFile,
                    up_workImg:up_workImg,
                    c_p_avatar:c_p_avatar,
                }
                axios.post('/process/staff_recruitment.php?act=recruitment_fill',Qs.stringify(params)).then(data =>{
                    console.log(data.data)
                    let { msg, code} = data.data
                        if (code !== 200) {
                            window.vant.Toast.fail(data.data.msg);
                        } else {
                            window.vant.Toast.success('提交成功')
                            setTimeout(function(){window.location.reload();}, 2000);
                            
                        }
                    }).catch(function (error) { 
                        console.log(error); 
                });
                // this.name = '';
                // this.salary = '';
                // this.workExperience = '';
                // this.up_workImg = [];
                // this.c_p_avatar = [];
                // let avatarImage = document.getElementById('avatarImage')
                // this.imgFile = avatarImage.src;
                // this.date = '';
                // console.log('提交成功');
            }
        }
    })

$('#age').mobiscroll().date({
    theme: 'mobiscroll',
    display: 'bottom',
    lang: 'zh',
    defaultValue:new Date(),
    dateFormat: 'yyyy-mm-dd',
    startYear:1940,
    endYear:2025,
    onClose(){
        if($("#age").val()!=""){
            var date=$("#age").val();
            app.get_Time(date)
        }
    }
});
</script>
</html>













